<template>
  <!-- 2. 准备一个具备宽高的容器 -->
  <div class="chart-container" ref="chartRef"></div>
</template>

<script lang="ts" setup>
// 1. 引入 echarts
// import * as echarts from "echarts";
import echarts from "../../../utils/echarts";
import type { ECOption } from "../../../utils/echarts";
import { ref, onMounted } from "vue";

const chartRef = ref();

onMounted(() => {
  // 3. 初始化 echarts 实例
  const myEcharts = echarts.init(chartRef.value);
  // 4. 定义图表配置项
  const option: ECOption = {
    title: {
      text: "各行业程序员数量",
      textStyle: {
        fontSize: 12,
        color: "#fff",
      },
      left: "center",
      top: 10,
    },
    xAxis: {
      data: [
        "旅游行业",
        "游戏行业",
        "电商行业",
        "医疗行业",
        "金融行业",
        "教育行业",
        "餐饮行业",
      ],
      // 文字
      axisLabel: {
        color: "rgba(255, 255, 255, 0.5)",
        fontSize: 8,
      },
      // 刻度线
      axisTick: {
        show: false,
      },
      // 轴线
      axisLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.1)",
        },
      },
    },
    yAxis: {
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.1)",
        },
      },
      // 轴线
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.1)",
        },
      },
      // 文字
      axisLabel: {
        color: "rgba(255, 255, 255, 0.5)",
        fontSize: 8,
      },
    },
    series: {
      type: "bar",
      data: [300, 200, 400, 250, 550, 450, 350],
      barWidth: 15,
      itemStyle: {
        borderRadius: [2, 2, 0, 0],
      },
    },
    grid: {
      top: 40,
      bottom: 25,
      right: 10,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: "{b}: {c}",
      backgroundColor: "rgba(0, 0, 0, 0.5)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  };
  // 5. 渲染图表
  myEcharts.setOption(option);
});
</script>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
